<template>
    <el-table :data="cartData" style="width: 100%">
        <el-table-column fixed prop="cid" label="购物车ID" width="100" />
        <el-table-column prop="uid" label="用户ID" width="80" />
        <el-table-column prop="gid" label="商品ID" width="80" />
        <el-table-column prop="num" label="商品数量" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column prop="updateTime" label="最后一次更新时间" width="200" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button plain type="primary" size="small" @click="updateCart(scope.row)">修改</el-button>
                <el-button plain type="danger" size="small" @click="deleteCart(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>



    <el-dialog v-model="isUpdate" title="修改购物车" width="40%" style="border-radius: 10px;">
        <el-form label-position="left" label-width="150px" :model="cartUpdateFrom" style="max-width: 460px;margin: 0 auto;">
            <div style="font-size: 12px;color: gray;margin-bottom:30px;text-align: center;">*部分数据不予手动修改，将不进行展示*</div>
            <el-form-item label="购物车ID（唯一键）">
                <el-input v-model="cartUpdateFrom.cid" disabled />
            </el-form-item>
            <el-form-item label="用户ID">
                <el-input v-model="cartUpdateFrom.uid" disabled />
            </el-form-item>
            <el-form-item label="商品ID">
                <el-input v-model="cartUpdateFrom.gid" disabled />
            </el-form-item>
            <el-form-item label="数量" prop="num">
                <el-input-number v-model="cartUpdateFrom.num" :precision="0" :min="1" :max="10" />
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button @click="isUpdate = false">关闭</el-button>
            <el-button type="primary" @click="submit_updateCart">提交</el-button>
        </template>
    </el-dialog>

</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

axios.defaults.baseURL = '/api'

export default {
    data() {
        return {
            cartData: [],
            isUpdate: false,
            cartUpdateFrom: {},
        }
    },
    created() {
        this.getCartData()
    },
    methods: {
        getCartData() {
            axios.get('/cart')
                .then(result => {
                    if (result.data.code === 1) {
                        this.cartData = result.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        deleteCart(cart) {
            let arr = [];
            arr.push(cart.cid);
            axios.delete('/cart/' + arr)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("删除成功");
                        this.getCartData();
                    } else {
                        ElMessage.error("删除失败")
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                        return;
                    }
                    ElMessage.error("删除失败！！！");
                })
        },
        updateCart(cart) {
            this.cartUpdateFrom = JSON.parse(JSON.stringify(cart));
            this.isUpdate = true;
        },
        submit_updateCart() {
            const data = [];
            const cart = {
                cid: this.cartUpdateFrom.cid,
                num: this.cartUpdateFrom.num,
            }
            data.push(cart);
            axios.put('/cart', data)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("修改成功");
                        this.getCartData();
                        this.isUpdate = false;
                    } else {
                        ElMessage.info("修改失败");
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response !== null && err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                    }
                })
        }
    }
}
</script>